import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setNum } from '../../stores/UserSlice'
import { Button, Stepper, Space } from 'antd-mobile'
import { MinusOutlined, PlusOutlined } from '@ant-design/icons'

export default function NumberOfVisitors(props) {
  const dispatch = useDispatch()
  const { num } = useSelector(state => state.user)
  
  return (
    <Space block align='center' justify='between' style={{ 
      '--gap': '24px',
      fontSize: '17px',
      padding: '12px 16px',
      backgroundColor: 'var(--adm-color-box)',
      borderRadius: '8px'
    }}>
      <span style={{ fontWeight: 600 }}>来访人数</span>
      
      <Space block align='center' justify='center' style={{ '--gap': '8px' }}>
        <Button 
          shape='rectangular' 
          color='primary' 
          onClick={() => dispatch(setNum(num - 1))} 
          disabled={num <= 0}
          style={{ '--border-radius': '4px', padding: '4px 8px' }}
        >
          <MinusOutlined />
        </Button>
        
        <span style={{ 
          width: '50px', 
          textAlign: 'center',
          fontSize: '17px',
          fontWeight: 600
        }}>
          {num}
        </span>
        
        <Button 
          shape='rectangular' 
          color='primary' 
          onClick={() => dispatch(setNum(num + 1))}
          disabled={num >= 500}
          style={{ '--border-radius': '4px', padding: '4px 8px' }}
        >
          <PlusOutlined />
        </Button>
      </Space>
    </Space>
  )
}